<template>
	<div class="container">
		<div style="width: 100vw;height: .3rem;background: #F5F5F5;"></div>
		<ul>
			<li>
				<div class="address-item">
					<div>
						<p>
							<span>王小二</span>
							<span>13777777777</span>
							<span>默认</span>
						</p>
						<p>浙江省温州市乐清市城南街道33号</p>
					</div>
					<div>编辑</div>
				</div>
				<div style="width: 100vw;height: .3rem;background: #F5F5F5;"></div>
			</li>
			<li>
				<div class="address-item">
					<div>
						<p>
							<span>王小二</span>
							<span>13777777777</span>
							<span>默认</span>
						</p>
						<p>浙江省温州市乐清市城南街道33号</p>
					</div>
					<div>编辑</div>
				</div>
				<div style="width: 100vw;height: .3rem;background: #F5F5F5;"></div>
			</li>
			<li>
				<div class="address-item">
					<div>
						<p>
							<span>王小二</span>
							<span>13777777777</span>
							<span>默认</span>
						</p>
						<p>浙江省温州市乐清市城南街道33号</p>
					</div>
					<div>编辑</div>
				</div>
				<div style="width: 100vw;height: .3rem;background: #F5F5F5;"></div>
			</li>
		</ul>
		<!-- 添加收获地址 -->
		<div @click="goEditAddress" class="arrow add-address">
			<span>添加收货地址</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goEditAddress () {
				this.$router.push({
					name: 'edit_address_index'
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.container {
		background: #fff;

		.address-item {
			padding: .3rem;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			div:first-child {
				p:first-child {
					margin-bottom: .2rem;

					span:first-child {
						font-size: 16px;
						color: #4A4A4A;
						margin-right: .3rem;
					}

					span:nth-child(2) {
						font-size: 14px;
						color: #9B9B9B;
						margin-right: .3rem;
					}

					span:nth-child(3) {
						background: rgba(33, 139, 251, 0.30);
						border-radius: 2px;
						display: inline-block;
						font-size: 12px;
						padding: .05rem .1rem;

						color: #218BFB;
					}
				}
			}

			div:last-child {
				height: 100%;
				border-left: .01rem solid #f6f6f6;
				padding: .3rem;
				font-size: 14px;
				color: #9B9B9B;
			}
		}
	}
	.add-address {
		padding: .3rem;
		color: #4A4A4A;
	}
</style>
